.flex {
    display: flex;
  }
  
  .flex-item {
    flex-direction: column;
  }
  
  .flex-1 {
    flex: 1;
  }
  
  .flex-right {
    justify-content: flex-end;
  }
  
  .flex-lrcenter {
    justify-content: center;
  }
  
  .flex-tbcenter {
    align-items: center;
  }
  
  .flex-allcenter {
    justify-content: center;
    align-items: center;
  }
  
  
  /* 水平方向 */
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  
  /* 垂直方向 */
  .flex-column {
    display: flex;
    flex-direction: column;
  }
  
  /* 横向上下居中 */
  .row-center {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  /* 横向左右居中 */
  .justify-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  /* 横向上下左右居中 */
  .all-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  /* 横向均匀分布 */
  .row-space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  /* 横向居中分布 */
  .row-space-around {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  
  /* 纵向左右居中 */
  .column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* 垂直两端对齐 */
  .column-space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  /* 纵向均匀分布 */
  .column-space-around {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  
  .flex-wrap{
      flex-wrap: wrap,
  }
  
  